<!doctype html>
<html ng-app>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>



    <script src="../../src/core/PrivateScope.js"></script>
    <script src="../../src/core/Utility.js"></script>
    <script src="../../src/core/Deferred.js"></script>
    <script src="../../src/core/AttachedData.js"></script>
    <script src="../../src/core/DataObserver.js"></script>
    <script src="../../src/core/ArrayMonitor.js"></script>
    <script src="../../src/core/GlobalSymbolHelper.js"></script>
    <script src="../../src/core/OptionParser.js"></script>
    <script src="../../src/core/KnotManager.js"></script>
    <script src="../../src/core/CBSLoader.js"></script>
    <script src="../../src/core/HTMLAPProvider.js"></script>
    <script src="../../src/core/HTMLKnotBuilder.js"></script>
    <script src="../../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../../src/core/WindowHashStatus.js"></script>
    <script src="../../src/core/KnotInterface.js"></script>

    <!--<script src="../../src/debugger/knot.debug.js"></script>-->


    <link rel="stylesheet" href="pfTest.css">
    <script type="text/cbs" src="test.cbs"></script>

    <script type="text/javascript" src="pfTest.js"></script>
</head>
<body>

<div>
    <p>
    <label>The number of todo items:</label> <input id="testTimes" type="number" value="1000"> <button id="testButton">Run Test</button>
    </p>

    <h3>Test result:</h3>
    <table id="testResult">
        <tbody>
            <tr>
                <td></td>
                <td>Create</td>
                <td>Change * 10</td>
                <td>Remove</td>
                <td>Sum</td>
            </tr>
            <tr>
                <td>jQuery.js</td>
                <td id="jqueryCreateCost"></td>
                <td id="jquerySetValueCost"></td>
                <td id="jqueryRemoveCost"></td>
                <td id="jquerySum"></td>
            </tr>
            <tr>
                <td>knot.js</td>
                <td id="knotCreateCost"></td>
                <td id="knotSetValueCost"></td>
                <td id="knotRemoveCost"></td>
                <td id="knotSum"></td>
            </tr>
            <tr>
                <td>knot.js (Batch mode)</td>
                <td id="knotBatchCreateCost"></td>
                <td id="knotBatchSetValueCost"></td>
                <td id="knotBatchRemoveCost"></td>
                <td id="knotBatchSum"></td>
            </tr>

        </tbody>
    </table>


<p>
    <span id="runningMessage"></span>
</p>

</div>

<div class="list" id="knotList">
    <div knot-template class="toDoItem"><span></span><span></span></div>
</div>
<div class="list" id="jqueryList"></div>

<div class="list" ng-controller="TodoCtrl">
            <div ng-repeat="todo in todos" ng-class="{true:'toDoItem completed', false:'toDoItem'}[todo.isCompleted]">
            <span>{{todo.text}}</span><span>{{todo.value}}</span>
        </div>
</div>

</body>
</html>